<script lang="ts" setup>
import { numToLocale } from '@/home/utils/format';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import { useAppStore } from '@/home/stores/app';
import { useCommunity } from '@/home/hooks/community';

const { $fetch } = useFetch();
const { name } = useCommunity();
const appStore = useAppStore();
const communityInfo = appStore.config;
const userInfo = appStore.user;

const { data: isMember, refresh } = useAsyncData(
  'home:tempalte3:isMember',
  () => userInfo.id && $fetch('/user/isMembers'),
);

const joinCommunity = async (refreshPage: boolean = false) => {
  const { isSuccess } = await $fetch('/user/joinCommunity', {
    autoGotoLogin: true,
  });

  if (isSuccess) {
    console.log('success');
  } else {
    console.log('fail');
  }

  if (refreshPage) {
    window.location.reload();
  }
  else {
    refresh();
  }
};
</script>

<template>
  <section class="h-322 rounded-4 bg-[url(@/home/assets/home/comcard.png)] bg-hex-fff bg-contain bg-no-repeat p-24 pt-28 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)]">
    <div class="flex justify-between">
      <img :src="communityInfo.headLogo" class="size-88 border-4 border-[#fff] rounded-12 object-cover shadow-[0_4px_6px_0_rgba(0,0,0,0.05)]" :alt="communityInfo.name" v-if="communityInfo.headLogo">
      <button
        type="button"
        class="h-32 w-80 cursor-pointer self-end rounded-4 bg-hex-3d7cfa text-center text-14 text-hex-fff font-400 leading-32"
        @click="joinCommunity(false)"
        v-if="!isMember"
      >
        {{ $t('home.home.communityCard.join') }}
      </button>
    </div>

    <div class="mt-16">
      <div class="line-clamp-1 h-22 text-16 font-500 leading-22">{{ communityInfo.name }}</div>
      <p class="line-clamp-1 mt-4 text-12 color-hex-8B8B8B font-400 leading-16">https://{{ name }}.atomgit.com</p>
    </div>
    <div class="mt-24">
      <div class="text-16 color-hex-292929 font-500 leading-22">{{ numToLocale(communityInfo.userNumber) }} <span class="ml-2">{{ $t('home.home.communityCard.people') }}</span></div>
      <p class="line-clamp-2 mt-8 h-34 text-12 color-hex-575757 font-400 leading-17" :title="communityInfo.description">{{ communityInfo.description }}</p>
    </div>
    <ul class="mt-16 flex gap-16">
      <template v-for="item in communityInfo.medium" :key="item.operatorId">
        <li :title="item.mediumName" v-if="item.mediumPic">
          <a class="block h-20 w-20" :href="item.mediumJumpAddress" target="_blank">
            <img :src="item.mediumPic" class="h-full w-full object-cover" :alt="item.mediumName">
          </a>
        </li>
      </template>
      <li v-if="communityInfo.qrcode" class="group relative">
        <div class="i-icons:wechat size-20 text-hex-28c445"></div>
        <div class="absolute left-50% top-130% hidden size-120 translate-x--50% rounded-4 bg-white p-4 shadow-[0_4px_6px_0_rgba(0,0,0,0.05)] group-hover:(block)">
          <img :src="communityInfo.qrcode" class="block size-full rounded-2 object-cover" alt="wechat">
        </div>
      </li>
    </ul>
  </section>
</template>

<style lang="scss" scoped>
</style>
